<template>
  <div id="myChart" style="width:1200px;height:450px;margin:auto;"></div>
</template>

<script setup>
import { ref } from 'vue'
import { getChartData } from "../../api/user.js";






import * as echarts from 'echarts'
import { onMounted } from "vue";

onMounted(() => {
  let myChart = echarts.init(document.getElementById("myChart"));
  //option定义的图表的数据
  let option = {
    title: {
      text: '数据统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2017-12-27', '2017-12-28', '2017-12-29', '2017-12-30', '2017-12-31', '2018-1-1']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: "华东",
        stack: "总量",
        type: "line",
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [2999, 3111, 4100, 3565, 3528, 6000]
      },
      {
        name: "华南",
        stack: "总量",
        type: "line",
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [5090, 2500, 3400, 6000, 6400, 7800]
      },
      {
        name: "华北",
        stack: "总量",
        type: "line",
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [6888, 4000, 8010, 12321, 13928, 12984]
      },
      {
        name: "西部",
        stack: "总量",
        type: "line",
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [9991, 4130, 7777, 12903, 13098, 14028]
      },
      {
        name: "其他",
        stack: "总量",
        type: "line",
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [15212, 5800, 10241, 14821, 15982, 14091]
      }
    ]
  }


  window.onresize = function () { // 自适应大小
    myChart.resize();
  };

  
getChartData().then(res=>{
  console.log(res);
  
  option.legend.data = res.data.data.legend.data
  option.xAxis.data = res.data.data.xAxis[0].data
  option.series = res.data.data.series
   console.log(option.title.text);
    myChart.setOption(option);

})

});


</script>